<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="MyCanvas" width="1350" height="600"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("MyCanvas");
			var ctx = canvas.getContext("2d");
			
			var arcArr = [
			    [20, 100, 10, 3, 0,"blue"],
			    [20, 100, 10, 5, 5,"orange"],
			    [20, 100, 10, 7, 5,"yellow"]
			];
			
			setInterval(function() {
               var vx = Math.random()*10+5;
			   var vy = Math.random()*10+5;
			   arcArr.push([20, 100, 10, vx,vy, "green"]);
			},100);
			setInterval(function() {
				ctx.fillStyle = "rgba(205,175,120,0.7)";
				ctx.fillRect(0, 0, 1350, 600);
				
		    /**颜色随机
			var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
			var colorArray = colorElements.split(",");
			var color = "#";
			for(var i = 0; i < 6; i++) {
				color += colorArray[Math.floor(Math.random() * 16)];
			}
			var vx = Math.random()*10+5;
			var vy = Math.random()*10+5;
			ballsList.push([20, 100, 30, vx,vy, color]);
		}, 500)
			**/
			
			for (var i = 0; i < arcArr.length; i++){
									
				ctx.beginPath();
				ctx.fillStyle = arcArr[i][5];
				/**
				var arcX = arcArr[0][0];
				var arcY = arcArr[0][1];
				var arcR = arcArr[0][2];
				var arcVX = arcArr[0][3];
				var arcVY = arcArr[0][4];
				**/
				ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
				ctx.fill();
				arcArr[i][0] = arcArr[i][0] + arcArr[i][3];
			    arcArr[i][1] = arcArr[i][1] + arcArr[i][4];
			    arcArr[i][4] = arcArr[i][4] + 0.5;
			     
			     if(arcArr[i][1] > 600 - arcArr[i][2]){
			        arcArr[i][4] = -arcArr[i][4];
			        arcArr[i][4] = arcArr[i][4]*0.8;
			        arcArr[i][1] = 600 - arcArr[i][2];
			     }
			     
			     if(arcArr[i][0] > 1350 - arcArr[i][2]){
			        arcArr[i][3] = -arcArr[i][3];
			        arcArr[i][0] = 1350 - arcArr[i][2];
			     }
			     
			     if(arcArr[i][0] < arcArr[i][2]){
			     	arcArr[i][3] = -arcArr[i][3];
			     	arcArr[i][0] = arcArr[i][2];
			     }
			    }
			},16);
		</script>
	</body>
</html>
